<template>
	<div class="AdvanceAll">
		<div class="Advance">
			<div class="adv_cont">
				<p class="exp_title">
					<span>微信售票机预订</span>
					<i></i>
				</p>
				<div class="adv_list">
					<ul>
						<li
							v-for="item in adv_list"
						>
							<i><img :src="item.IMG"></i>
							<p>{{item.title}}</p>
							<p>{{item.text}}</p>
							 
						</li>
	 
					</ul>
				</div>
			</div>
		</div>
		<div class="OrderLayer">
			<div class="order_cont">
				<p class="clickBut"><a @click="trigger()">在线预订</a></p>
			</div>
			<!-- 弹出内容 -->
			<div class="message" v-if="isShow">
				<div class="mesgAll">
					<a class="del" @click="trigger()">×</a>
					<p class="mesg_title">
						<span>合作机会</span>
						<i></i>
					</p>
					<p class="mesg_p1">一封邮件或许正是开启一次合作的开端</p>
					<p class="mesg_p2">欢迎填写表格发送合作邮件至：<font>mkt@fjticket.cn</font>您也可以直接拨打咨询热线：<font>010-8646-9812</font>。</p>
					<ul>
						<li>
							<input type="text" v-model="userName">
							<span>您的姓名：</span>
							<font>{{text_Name.texts}}</font>
						</li>
						<li>
							<input type="text" v-model="userCompany">
							<span>公司名称：</span>
							<font >{{text_Company.texts}}</font>
						</li>
						<li>
							<input type="email" v-model="userEmail">
							<span>您的邮箱：</span>
							<font >{{text_Email.texts}}</font>
						</li>
						<li>
							<input type="text" v-model="userPhone">
							<span>联系电话：</span>
							<font >{{text_Phone.texts}}</font>
						</li>
					</ul>
					<p class="mesgbut"  ><button @click="mesgbut()">完成并发送</button></p>
				</div>
				<!-- {{rendy}} -->
			</div>

		</div>

		<!-- 模块弹窗 -->
		<div class="layer" v-if="isShow"></div>
		

	</div>
	


</template>
<script>
	export default{
		name:'Advance',
		data(){
			return{
				isShow:false,
				userName:'',
				userCompany:'',
				userEmail:'',
				userPhone:'',
				texts:'', 
				adv_list:[
					{
						IMG:require('../../assets/fiveuse/people.png'),
						title:'在线申请',
						text:'提交订单后客户经理会 致电您确认相关事宜'
					},
					{
						IMG:require('../../assets/fiveuse/paper.png'),
						title:'签约',
						text:'如需纸质合同我们会将 合同打印后盖章快递给您'
					},
					{
						IMG:require('../../assets/fiveuse/money.png'),
						title:'付款',
						text:'推荐您在线付款更方便 安全也可以线下汇款'
					},
					{
						IMG:require('../../assets/fiveuse/success.png'),
						title:'到货',
						text:'约30日内'
					}

				]
			}
		},
		computed:{
			text_Name:function(){
			 	let  texts,boolen
			 	if(this.userName==""){
					boolen=false
					texts ="不能为空"
				}else{
					boolen=true
					texts="输入正确"
				}
				if (!this.NameFlag) {
			        texts='*'
			        this.NameFlag = true
			      }
				return {
					texts,
					boolen	
				}
			 },
			  text_Company:function(){
			 	let  texts,boolen
			 	if(this.userCompany==""){
					boolen=false
					texts ="不能为空"
				}else{
					boolen=true
					texts="输入正确"
				}
				if (!this.CompanyFlag) {
			        texts='*'
			        this.CompanyFlag = true
			      }
				return {
					texts,
					boolen	
				}
			 },
			  text_Email:function(){
			 	let  texts,boolen
			 	if(!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.userEmail))){
					boolen=false
					texts ="请正确填写邮箱"
				}else{
					boolen=true
					texts="输入正确"
				}
				if (!this.EmailFlag) {
			        texts='*'
			        this.EmailFlag = true
			      }
				return {
					texts,
					boolen	
				}
			 },
			  text_Phone:function(){
			 	let  texts,boolen
			 	if(!(/^1[34578]\d{9}$/.test(this.userPhone))){
					boolen=false
					texts ="请正确输入手机号"
				}else{
					boolen=true
					texts ="输入正确"
				}
				if (!this.PhoneFlag) {
			        texts='*'
			        this.PhoneFlag = true
			      }
				return {
					texts,
					boolen	
				}
			 }


		},
		methods:{
			trigger:function(){
				this.isShow=!this.isShow;
			},
			mesgbut:function(){
				if(this.userName==""){
	
				}else if(this.userCompany==""){
					 
				}else if(this.userEmail==""){
					 
				}else if(this.text_Phone==""){
					 
				}else{
					console.log("验证成功！")
					this.isShow=false
				}

			}
		}
	}
</script>
<style scoped>
	@media only screen and (min-width: 1000px){
		.Advance{
			width: 100%;
			margin-bottom: 150px;
		}
		.Advance .adv_cont{
			width: 1000px;
			margin:0 auto;
		}
		.exp_title{
			color: #4d4845;
			text-align: center;
			width: 100%;
			margin-top:40px;
			float: left;
			margin-bottom: 60px;
		}
		.exp_title span{
			font-size:26px; 
			display: block;
		}
		.exp_title i{
			display: inline-block;
			width: 50px;
			height: 2px;
			background-color: #4d4845;
		}
		.adv_list{
			width: 100%;
			overflow: hidden;
			
		}
		.adv_list ul{
			float: left;
		}
		.adv_list ul li i{
			display: inline-block;
			width: 50px;
			height: 50px;
		}
		.adv_list ul li{
			width: 24.5%; 
			display: inline-block;
			text-align: center;
			float: left;

		}

		.adv_list ul li p:nth-child(2){
			font-size: 16px;
			color: #4d4845;
			font-weight: 600;
			margin-bottom: 24px;
			margin-top:30px;
		}
		.adv_list ul li p:nth-child(3){
			font-size: 14px;
			color: #666;
			padding:0 44px;
		}
		
		.OrderLayer{
			width: 100%;
			height: 94px;
		 	background-color: #00ade6;
		 	position: relative;

		}
		.order_cont{
			width: 1000px;
			margin:0 auto;
		}
		.order_cont .clickBut{
			text-align: center;
			width: 100%;
		}
		.order_cont .clickBut a{
			width: 320px;
			height:60px;
			display: inline-block;
			text-align: center;
			line-height: 60px;
			font-size: 30px;
			color: #00ade6;
			background-color: #fff;
			border-radius:60px;
			 margin-top: -30px; 
			box-shadow: 0px -10px 10px #d4f1fb;
			cursor: pointer;
		}
		.layer{
			position: fixed;
			z-index: 100;
			width: 100%;
			height: 100%;
			background-color: #333;
			opacity: 0.5;
			top: 0;
			left: 0;

		}
		.message{
			position:absolute;
			z-index: 101;
			width: 100%;
		 	top: -650px;
		 
		}
		.mesgAll{
			width: 944px;
			margin:0 auto;
			background-color: #fff;
			padding: 20px; 
			overflow: hidden;
		}
		.mesgAll .del{
			 
			float:right;
			font-size:30px;
			display: inline-block;
			cursor: pointer;
		}
		.mesg_title{
			color: #4d4845;
			text-align: center;
			width: 100%;
			margin-top:20px;
			float: left;
		 
		}
		.mesg_title span{
			font-size:26px; 
			display: block;
		}
		.mesg_title i{
			display: inline-block;
			width: 50px;
			height: 2px;
			background-color: #4d4845;
		}
		.mesgAll p{
			text-align: center;
			float: left;
			width: 100%;
			margin-top: 14px;
			font-size: 16px;
			color: #4d4845;
		}
		.mesgAll .mesg_p2 font{
			color:#00ade6;
		}
		.mesgAll ul{
			float: left;
			width: 100%;
			margin-top:60px;
		} 
		.mesgAll ul li{
			width: 46.5%;
			float: left;
			position: relative;
			margin-left:20px;
			margin-bottom: 16px;
		}
		.mesgAll ul li input{
			width: 100%;
			height: 48px;
			text-indent: 90px;
		}
		.mesgAll ul li input:focus{
			/* outline:none; */
			border-color: #00ade6;
		}
		.mesgAll ul li span{
			position: absolute;
			left: 0;
		}
		.mesgAll ul li span{
			position: absolute;
			left: 15px;
			top:15px;
			font-size: 14px;
			color: #666666;
		}
		.mesgAll ul li font{
			position: absolute;
			right:15px;
			top: 15px;
			font-size: 14px;
			color: #666666;

		}
		.mesgbut{
			margin-top:20px;
			margin-bottom: 70px;
		}
		.mesgbut button{
			 width: 480px;
			 height: 50px;
			 background-color: #00afe3;
			 color: #fff;
			 font-size: 18px;
			 border: none;
		}
		.mesgbut button:hover{
			transition:all 0.5s ease-in-out;
			 background-color: #18c6f9;
		}
	}
</style>